<template>
    <div class="message-box" v-show="isShowMessageBox">
        <div id="Box_M" >
            <div class="message-content" style="height:50%">
              <h2 class="title">{{ title }}</h2>
              <h3 class="content">{{ content }}</h3>
            </div>
            <div v-if="isShowInput" style="height: 20%;text-align: center;">
              <input class="Ip" type="text" v-model="inputValue"  ref="input">
            </div>
            <div class="btn-group" style="height:30%">
                <button class="btn-default" @click="cancel" v-show="isShowCancelBtn">{{ cancelBtnText }}</button>
                <button class="btn-primary btn-confirm" @click="confirm" v-show="isShowConfimrBtn">{{ confirmBtnText }}</button>
            </div>
        </div>
    </div>
</template>
    
<script>
export default {
  props: {
    title: {
      type: String,
      default: "标题"
    },
    content: {
      type: String,
      default: "这是弹框内容"
    },
    isShowInput: false,
    inputValue: "",
    isShowCancelBtn: {
      type: Boolean,
      default: true
    },
    isShowConfimrBtn: {
      type: Boolean,
      default: true
    },
    cancelBtnText: {
      type: String,
      default: "取消"
    },
    confirmBtnText: {
      type: String,
      default: "确定"
    }
  },
  data() {
    return {
      isShowMessageBox: false,
      resolve: "",
      reject: "",
      promise: "",
      heights: "260px"
    };
  },
  methods: {
    confirm: function() {
      this.isShowMessageBox = false;
      if (this.isShowInput) {
        this.resolve(this.inputValue);
      } else {
        this.resolve("confirm");
      }
      this.remove();
    },
    cancel: function() {
      this.isShowMessageBox = false;
      this.resolve("cancel");
      this.remove();
    },
    showMsgBox: function() {
      this.isShowMessageBox = true;
      this.promise = new Promise((resolve, reject) => {
        this.resolve = resolve;
        this.reject = reject;
      });
      return this.promise;
    },
    remove: function() {
      setTimeout(() => {
        this.destroy();
      }, 300);
    },
    destroy: function() {
      this.$destroy();
      document.body.removeChild(this.$el);
    }
  }
};
</script>
<style scoped>
.message-box {
  position: absolute;
  width: 100%;
  height: 100%;
  /* display: flex; */
  top: 0;
  z-index: 999999;
  background: rgba(49, 45, 45, 0.32);
}
#Box_M {
  width: 500px;
  background: #fbfbfb;
  margin: 0 auto;
  margin-top: 6.4%;
  border-radius: 10px;
  box-shadow: 0 0 5px #0a0404;
  /* padding: 1%; */
}
.title {
  background-color: #57a3f3;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  padding: 3% 4%;
  color: white;
}
.content {
  padding: 5%;
  font-size: 18px;
  text-align: center;
  /* margin-top: 5%; */
}
.Ip {
  width: 80%;
  height: 36px;
  font-size: 18px;
}
.btn-group {
  padding: 4%;
}
.btn-default {
  width: 30%;
  height: 40px;
  font-size: 16px;
  cursor: pointer;
}
.btn-confirm {
  width: 30%;
  height: 40px;
  margin-left: 39%;
  background-color: #2d8cf0;
  color: white;
  font-size: 16px;
  cursor: pointer;
}
</style>
    